<template>
	<view class="self">
		<!-- 状态栏高度 -->
		<view class="" :style="{height:getNavBarHeight() + 'px'}"></view>

		<view class="userInfo">
			<view class="left">
				<view class="avatar">
					<image :src="userStore.userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="username">{{truncateStr(userStore.userInfo.username, 7)}}</view>
					<view class="text">喝汤的第{{registerDays}}天</view>
				</view>
			</view>

			<navigator class="right" url="/pages_self/user/edit">
				<view class="text">编辑资料</view>
				<view class="icon">
					<uni-icons type="right" size="20" color="#999"></uni-icons>
				</view>
			</navigator>
		</view>

		<!-- 上卡片 -->
		<view class="cardLayout">
			<view class="list">
				<navigator url="/pages_self/soup/list" class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(111,207,151,1),rgba(111,207,151,0.5))">
							<uni-icons customPrefix="iconfont" type="xxm-highlight-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">熬制鸡汤</view>
					</view>
					<view class="right">
						<view class="text">33</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</navigator>

				<navigator class="item" v-if="isAdminRole()" url="/pages_self/reviewed/review_list">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(156,77,204,1),rgba(156,77,204,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-edit-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">审核鸡汤</view>
					</view>
					<view class="right">
						<view class="text">33</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</navigator>




				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(255,200,87,1),rgba(255,200,87,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-star-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">我的收藏</view>
					</view>
					<view class="right">
						<view class="text">33</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>




				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(75,228,197,1),rgba(75,228,197,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-hourglass-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">我的积分</view>
					</view>
					<view class="right">
						<view class="text">33</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>

				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(59,59,152,1),rgba(59,59,152,0.5))">
							<uni-icons type="pyq" color="#fff" size="18"></uni-icons>
						</view>
						<view class="name">鸡圈</view>
					</view>
					<view class="right">
						<view class="text">Beta版</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>

				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(255,112,52,1),rgba(255,112,52,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-message-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">联系我们</view>
					</view>
					<view class="right">
						<view class="text">在线客服</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>

			</view>
		</view>

		<!-- 下卡片 -->
		<view class="cardLayout">
			<view class="list">

				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(181,207,216,1),rgba(181,207,216,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-pushpin-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">偏好设置</view>
					</view>
					<view class="right">
						<view class="text">默认</view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>


				<view class="item">
					<view class="left">
						<view class="icon"
							style="background-image: linear-gradient(to right,rgba(181,207,216,1),rgba(181,207,216,0.5))">
							<uni-icons custom-prefix="iconfont" type="xxm-api-fill" size="18" color="#fff"></uni-icons>
						</view>
						<view class="name">退出登录</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="22" color="#999"></uni-icons>
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script setup>
	import {computed} from "vue";
	import {getNavBarHeight} from "../../utils/system.js";
	import {useUserStore} from "../../stores/user.js";
	import {getDaysFromTimestamp,truncateStr} from "@/utils/tools.js";
	import {isAdminRole} from "@/utils/tools.js"
	
	
const userStore = useUserStore();

const registerDays = computed(() => {
	let day = getDaysFromTimestamp(userStore.userInfo.register_date)
	return day;
})


</script>

<style scoped lang="scss">
	.self {
		background: $page-bg-color;
		min-height: 100vh;

		.userInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 50rpx;

			.left {
				display: flex;
				align-items: center;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border: 3rpx solid #F7F7F7;
					border-radis: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					.username {
						font-size: 30rpx;
						font-weight: 600;
						color: #111;
					}

					.text {
						font-size: 26rpx;
						ont-weight: 100;
						color: $text-font-color-3;
						padding-top: 10rpx;
					}


				}

			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #999;
				}

			}

		}


		.cardLayout {
			width: 690rpx;
			background: #fff;
			margin: 30rpx auto;
			border-radius: 20rpx;

			.list {
				padding: 0 30rpx;

				.item {
					border-bottom: 1rpx solid $border-color-light;

					&:last-child {
						border: none;
					}

					padding: 28rpx 0rpx;

					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;

						.icon {
							width: 50rpx;
							height: 50rpx;
							background: #fff;
							border-radius: 50%;
							overflow: hidden; // 隐藏超出部分
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.name {
							font-size: 30rpx;
							color: #111;
							padding-left: 20rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #999;

					}

				}
			}
		}


	}
</style>